<script setup>
import { BezierEdge, EdgeLabelRenderer, useVueFlow, getBezierPath } from '@vue-flow/core';
import { computed } from 'vue'
import {Icons} from "@/constants/index.js";

const props = defineProps(['id', 'sourceX', 'sourceY','selected', 'targetX', 'targetY', 'sourcePosition', 'targetPosition', 'animated','markerEnd']);

console.debug("customedge", props)
const { removeEdges } = useVueFlow()
const path = computed(() => getBezierPath(props))
</script>


<template>
    <BezierEdge
        :animated="true"
        :source-x="sourceX"
        :source-y="sourceY"
        :target-x="targetX"
        :target-y="targetY"
        :source-position="sourcePosition"
        :target-position="targetPosition"
        :marker-end="markerEnd"
    />
    <EdgeLabelRenderer>
        <div v-if="props.selected"
            :style="{
        pointerEvents: 'all',
        position: 'absolute',
        transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)`,
      }"
            class="nodrag nopan"
        >
            <jb-btn text  type="error" icon=""  confirm-text="确认删除该连接吗？" @confirm="removeEdges(props.id)">
                <jb-icon :icon="Icons.DELETE" width="30"></jb-icon>
            </jb-btn>
        </div>
    </EdgeLabelRenderer>
</template>